//#- 首先要明白，什么函数能够得到异步操作的结果--那就是回调函数~！
// 异步操作：就是将内部返回值，返回到最外层~！


//promise
//什么是异步   a->b->c （）
//promise的作用
//promise的基本用法
{
  // es5 中的异步操作
  let ajax=function(callback){
    console.log('执行');
    setTimeout(function () {
      callback&&callback.call() ; // call（）-->调用 callback 这个具名函数
    }, 1000);
  };
  ajax(function(){
    console.log('timeout1');
  })
}

{//es6 中的一步操作
  let ajax=function(){
    console.log('执行2');
    return new Promise(function(resolve,reject){    //和es5区别，不是执行回调函数，而是返回了一个对象。
      setTimeout(function () {                      //resolve  ：  执行下一步
        resolve()                                   //reject   ：  拒绝（中断当前操作）
      }, 1000);
    })
  };

  ajax().then(function(){                           //这个就是  resolve 的  下一步
    console.log('promise','timeout2');
  })
}

{  //异步操作的  串联操作效果
  let ajax=function(){
    console.log('执行3');
    return new Promise(function(resolve,reject){
      setTimeout(function () {
        resolve()
      }, 1000);
    })
  };

  ajax()
    .then(function(){                             //第一个 then（）
    return new Promise(function(resolve,reject){    //Promise
      setTimeout(function () {
        resolve()
      }, 2000);
    });
  })
    .then(function(){                             //第二个 then（）
    console.log('timeout3');
  })
}

{
  let ajax=function(num){
    console.log('执行4');
    return new Promise(function(resolve,reject){
      if(num>5){
        resolve()
      }else{
        throw new Error('出错了')
      }
    })
  }

  ajax(6).then(function(){
    console.log('log',6);
  }).catch(function(err){              //捕获 某一步骤的错误
    console.log('catch',err);
  });

  ajax(3).then(function(){
    console.log('log',3);
  }).catch(function(err){
    console.log('catch',err);
  });
}


//-----------------------
//举例子：
//      Promise.all
//-----------------------
{
    // 所有图片加载完再添加到页面
    function loadImg(src){
        return new Promise((resolve,reject)=>{
            let img=document.createElement('img');
            img.src=src;
            img.onload=function(){       //1.图片加载完成
                resolve(img);
            }
            img.onerror=function(err){   //图片加载失败
                reject(err);
            }
        })
    }

    function showImgs(imgs){             //2.图片添加到页面
        imgs.forEach(function(img){
            document.body.appendChild(img);
        })
    }

    Promise.all([                        //---『重要的一步』
        loadImg('http://i4.buimg.com/567571/df1ef0720bea6832.png'),
        loadImg('http://i4.buimg.com/567751/2b07ee25b08930ba.png'),
        loadImg('http://i2.muimg.com/567751/5eb8190d6b2a1c9c.png')
    ]).then(showImgs)                    //1.多个Promise实例生成一个新的Promise实例，图片都加载之后  =》 2.then（添加到页面）

}

{
    // 有一个图片加载完就添加到页面
    function loadImg(src){
        return new Promise((resolve,reject)=>{
            let img=document.createElement('img');
            img.src=src;
            img.onload=function(){
                resolve(img);
            }
            img.onerror=function(err){
                reject(err);
            }
        })
    }

    function showImgs(img){
        let p=document.createElement('p');
        p.appendChild(img);
        document.body.appendChild(p)
    }

    Promise.race([                             //------多个实例中有一个改变，这个race实例也跟着改变，其他就不执行了（仅仅执行一个~！）
        loadImg('http://i4.buimg.com/567571/df1ef0720bea6832.png'),
        loadImg('http://i4.buimg.com/567751/2b07ee25b08930ba.png'),
        loadImg('http://i2.muimg.com/567751/5eb8190d6b2a1c9c.png')
    ]).then(showImgs)

}